<template>
  <div class="gexing">
    <div class="top-lunbo">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(item, index) in lunboimglist" :key="index">
          <img :src="item.imageUrl" :alt="item.typeTitle" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 推荐歌单 -->
    <div class="recommend-list">
      <div class="top flex">
        <div class="left">推荐歌单</div>
        <div>更多></div>
      </div>
      <div class="music-list flex">
        <div v-for="item in songMenuList" class="item" :key="item.id">
          <div class="i-top">
            <div class="i-top-like">
              <i class="el-icon-headset"></i>{{ item.playCount | changToWan }}
            </div>
            <div class="i-top-name">{{ item.name }}</div>
            <img :src="item.coverImgUrl" alt="" />
            <div class="play"><i class="el-icon-video-play"></i></div>
          </div>
          <div>
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <!-- 独家放送 -->
    <div class="exclusive-list">
      <div class="top flex">
        <div class="left">独家放送</div>
        <div>更多></div>
      </div>
      <div class="music-list flex-three">
        <div v-for="item in exclusiveList" class="item" :key="item.id">
          <div class="i-top">
            <img :src="item.picUrl" alt="" />
            <div class="play"><i class="el-icon-video-play"></i></div>
          </div>
          <div>{{ item.copywriter }}</div>
        </div>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="latest-music-box">
      <div class="top flex">
        <div class="left">最新音乐</div>
        <div>更多></div>
      </div>
      <div class="music-list flex-three">
        <div
          v-for="(item, index) in latestMusicList"
          :key="item.id"
          class="music-list-item flex-two"
        >
          <div class="left-order">{{ index | changeIndex }}</div>
          <div class="img-wrap" @click="musicPlay(item)">
            <img :src="item.picUrl" alt="" />
            <i class="el-icon-video-play"></i>
          </div>
          <div class="name-wrap">
            <div>{{ item.name }}</div>
            <div>{{ item.alg }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import { lunBo, getSonglist } from "@/network/gexing.js";
import {changToWan,changeIndex} from "@/common/filter";
import { getUrl, getmpsDetails } from "@/network/play";
import { mapMutations } from "vuex";
export default {
  name: "Gexing",
  data() {
    return {
      lunboimglist: [],
      songMenuList: [],
      exclusiveList: [],
      latestMusicList: [],
    };
  },
  created() {
    this.getlunbo();
    this.getRecommendSongList();
    this.getExclusiveSongList();
    this.getLatestMusicList();
  },
  methods: {
    getlunbo() {
      lunBo("/banner").then((res) => {
        this.lunboimglist = res.banners;
        // console.log(this.lunboimglist);
      });
    },
    //获取推荐歌单
    getRecommendSongList() {
      getSonglist("/top/playlist", { limit: 10 }).then((res) => {
        // console.log(res.playlists);
        this.songMenuList = res.playlists;
      });
    },
    //获取独家放送
    getExclusiveSongList() {
      getSonglist("/personalized/privatecontent").then((res) => {
        // console.log(res.result);
        this.exclusiveList = res.result;
      });
    },
    getLatestMusicList() {
      getSonglist("/personalized/newsong").then((res) => {
        // console.log(res.result);
        this.latestMusicList = res.result;
      });
    },
    getMusicUrl(id){
      getUrl('/song/url',{
        id
      }).then(res=>{
        // console.log(res.data[0].url)
        this.getmp3Url(res.data[0].url);
      })
    },
    getMusicDetails(ids){
      getmpsDetails('/song/detail',{
        ids
      }).then(res=>{
        // console.log(res.songs[0])
        this.getmusicDetails(res.songs[0])
      })
    },
    musicPlay(mpsObj){
      // console.log(mpsObj.song.mMusic.playTime)
      this.getMusicUrl(mpsObj.id);
      this.getMusicDetails(mpsObj.id);
    },
    ...mapMutations(["getmp3Url",'getmusicDetails'])
  },
  filters: {
    changToWan,
    changeIndex
  }
};
</script>
    
<style scoped lang='less'>
.top-lunbo {
  //   width: 80%;
  margin: 0 auto;
  margin-top: 20px;
  .el-carousel__item img {
    max-width: 100%;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
.recommend-list {
  font-size: 14px;
  .top {
    height: 30px;
    border-bottom: 2px solid skyblue;
    .left {
      font-size: 20px;
    }
  }
  .music-list {
    margin-top: 10px;
    // overflow-y: scroll;
    .item {
      height: 250px;
      width: 200px;
      .i-top {
        width: 200px;
        height: 200px;
        position: relative;
        overflow: hidden;
        img {
          width: 200px;
          height: 200px;
        }
        .i-top-name {
          height: 20;
          width: 200px;
          line-height: 20px;
          font-size: 10px;
          background-color: rgba(0, 0, 0, 0.8);
          color: #fff;
          position: absolute;
          transform: translateY(-100%);
          left: 0;
          transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        }
        .i-top-like {
          position: absolute;
          top: 5px;
          right: 0;
          height: 14px;
          font-size: 8px;
          line-height: 14px;
          color: white;
          background-color: rgba(0, 0, 0, 0.3);
          text-align: right;
          padding-right: 5px;
        }
        .play {
          position: absolute;
          right: 0;
          top: 130px;
          width: 50px;
          height: 50px;
          transform: translateX(100%);
          transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
          border-radius: 50%;
          font-size: 50px;
          color: red;
        }
        .play:hover {
          cursor: pointer;
        }
      }
    }
    .item:hover .i-top-name {
      transform: translateY(0);
    }
    .item:hover .play {
      transform: translateX(0);
    }
  }
}

.exclusive-list {
  font-size: 14px;
  .top {
    height: 30px;
    border-bottom: 2px solid skyblue;
    .left {
      font-size: 20px;
    }
  }
  .music-list {
    height: 226px;
    margin-top: 20px;
    padding: 0 30px;
    .item {
      width: 311px;
      margin: 0 10px;
      .i-top {
        position: relative;
        overflow: hidden;
        img {
          max-width: 311px;
        }
        .play {
          position: absolute;
          right: 0;
          top: 50px;
          width: 50px;
          height: 50px;
          transform: translateX(100%);
          transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
          border-radius: 50%;
          font-size: 50px;
          color: red;
        }
        .play:hover {
          cursor: pointer;
        }
      }
    }
    .item:hover .play {
      transform: translateX(0);
    }
  }
}

.latest-music-box {
  font-size: 14px;
  .top {
    height: 30px;
    border-bottom: 2px solid skyblue;
    .left {
      font-size: 20px;
    }
  }
  .music-list {
    // padding: 0 10px;
    padding-top: 20px;
    .music-list-item {
      width: 500px;
      height: 100px;
      border: 1px solid lightgrey;
      .left-order {
        flex: 2;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
      }
      .img-wrap {
        flex: 4;
        position: relative;
        img {
          width: 100px;
          height: 60px;
        }
        .el-icon-video-play {
          position: absolute;
          right: 30px;
          bottom: 5px;
          width: 30px;
          height: 30px;
          color: orange;
          font-size: 30px;
        }
      }
      .name-wrap {
        flex: 10;
      }
    }
    .music-list-item:hover {
      background-color: #f1f1f1;
    }
  }
}
</style>